<template>
<div>
<home-header></home-header>
<home-swiper :swiperList="swiperList"></home-swiper>
<home-icons :iconsList="iconsList"></home-icons>
<home-recommend :recommendList="recommendList"></home-recommend>
<home-weekend :weekendList="weekendList"></home-weekend>
</div>
</template>

<script>
import homeHeader from './components/homeHeader.vue'
import homeSwiper from "./components/swiper.vue"
import homeIcons from "./components/icons.vue"
import homeRecommend from "./components/recommend.vue"
import homeWeekend from "./components/weekend.vue"
import axios from 'axios' //使用axios发送ajax请求
export default{
  name: 'home',
  data(){
    return {
      iconsList:[],
      recommendList:[],
      swiperList:[],
      weekendList:[],
    }
  },
  components: {
    homeHeader,
    homeSwiper,
    homeIcons,
    homeRecommend,
    homeWeekend,
  },
  methods:{
    getHomeInfo(){
      axios.get('/api/index.json') // 代码如果要上线就不能写成/static/mock/index.json这样，
                                  //个人觉得是出于安全考虑，通过webpack提供的代理机制，修改config目录下的index.js
        .then(this.getHomeInfoScc);
    },
    getHomeInfoScc(res){
      var res = res.data;
      if(res.ret && res.data){
        var data = res.data;
        this.iconsList = data.iconList;
        this.recommendList = data.recommendList;
        this.swiperList = data.swiperList;
        this.weekendList = data.weekendList;
      };
    }
  },
  mounted(){
    this.getHomeInfo() 
  }
};
</script>

<style>
/*设置全局样式*/
.ellipsis{
	overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>